<template>
	<view class="malldetail-flex-hh">
		<!-- 首页滑动banner -->
		<view class="malldetail-flex-h">

			<u-swiper  :height="750" :list="list"  mode="number" indicator-pos="bottomRight"></u-swiper>
		</view>
		<!-- 商品信息 -->
		<view class="malldetail">
			<view class="malldetail-con">
				<!-- 价格 -->
				<view class="price">
					<view class="price-left">
						<view class="price-left-top">
							<text class="malldetail-price" v-if="basicdata.goodPrice === '免费'">{{basicdata.goodPrice}}</text>
							<text class="malldetail-price" v-else v-show="basicdata.goodPrice?true:false"><text class="malldetail-price-ioc">￥</text>{{basicdata.goodPrice}}</text>
							<text class="malldetail-oldPrice" v-show="basicdata.goodOldPrice === 'undefined' || basicdata.goodOldPrice ===undefined ? false : true"><text
								 class="malldetail-price-ioc">￥</text>{{basicdata.goodOldPrice}}</text>
						</view>
						<!-- 名称 -->
						<view class="malldetail-good-name lH42">{{basicdata.goodName}}</view>
					</view>

					<view class="price-right">
						<view class="collection">
							<image  :src="hasCollect === true ? '../../static/good/ysc.png' :'../../static/good/cang.png'" @click="collection(hasCollect)"></image>
							<text>收藏</text>							
						</view>
						<view class="collection share">
							<image src="../../static/good/fen.png" mode=""></image>
							<text>分享</text>
						</view>
					</view>
				</view>

				<view class="good-name-text mt20" v-if="isGoods">
					<view class="good-name-left">
						<text class="good-name1">{{basicdata.goodText1}}</text>
						<text class="good-name2">{{basicdata.goodText2}}</text>
						<text class="good-name3">{{basicdata.goodText3}}</text>
					</view>
					<view class="sold">已售{{basicdata.sold}}</view>
				</view>
				<!-- 退换 -->
				<view class="return" v-if="isGoods">不可退换货</view>
			</view>
		</view>
		<!-- 配送时间 -->
		<view class="deliver" v-if="isGoods">
			<text><text class="deliver-data">预计送达时间</text>：{{basicdata.goodData}}</text>
		</view>
		<!-- 优惠卷 -->
		<view class="malldetail-free" v-if="isGoods">
			<view class="free" @click="GoFree()">
				<view class="frees">
					<text class="malldetail-free-title">优惠券</text>
					<view>
						<text class="malldetail-free-detail">{{basicdata.goodFree1}}</text>
						<text class="malldetail-free-detail">{{basicdata.goodFree2}}</text>
						<text class="malldetail-free-detail">{{basicdata.goodFree3}}</text>
					</view>
				</view>
				<image class="malldetail-free-img" src="../../static/good/dk.png" ></image>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		name: 'good-basic',
		props: {
			basicdata: {
				
			},
			isGoods:Boolean
		},
		data() {
			return {
				hasCollect:false,
				list: [
					{image: '/static/good/1.jpg'},
					{image: '/static/good/1.jpg'}
				],
			}
		},
		onLoad() {
			this.hasCollect = this.isCollect
		},
		created() {},
		methods: {
			GoFree() {
				this.$emit('gofree')
			},
			collection(isc) {
				if(isc === true){
					this.hasCollect = false
					uni.showToast({
						icon:'none',
						title:'取消收藏'
					})
				}else{
					this.hasCollect = true
					uni.showToast({
						icon:'none',
						title:'已收藏'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.malldetail-flex-hh {
		width: 100%;
		height: 100%;

		.malldetail-flex-h {
			width: 100%;
			height:750rpx;
			display: flex;
			flex-direction: column;
		}

		.malldetail {
			background-color: #fff;
			width: 100%;

			.malldetail-con {
				padding: 0 24rpx 38rpx;

				.price {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					position: relative;

					.price-left {
						width: 70%;
						height: auto;

						.price-left-top {
							height: 103rpx;
							line-height: 103rpx;

							.malldetail-price {
								color: #F01D31;
								font-size: 48rpx;
								font-weight: bold;
								font-family: PingFang;

								.malldetail-price-ioc {
									font-size: 24rpx;
								}
							}

							.malldetail-oldPrice {
								margin-left: 20rpx;
								color: #A3A3A3;
								font-family: PingFang;
								text-decoration: line-through;
								font-size: 24rpx;
							}
						}

						.malldetail-good-name {
							height: 72rpx;
							font-size: 30rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #292929;
						}
					}

					.price-right {
						height: 100%;
						width: 20%;
						display: flex;
						position: absolute;
						top: 32rpx;
						right: 0;

						.collection {
							align-items: center;
							justify-content: center;
							text-align: center;

							image {
								width: 32rpx;
								height: 32rpx;
							}

							text {
								display: inline-block;
								font-size: 22rpx;
								font-family: PingFang;
								font-weight: 500;
								color: rgba(128, 128, 128, 1);
								line-height: 42rpx;
							}
						}
					}


				}

				.good-name-text {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					.good-name-left {

						text {
							display: inline-block;
							padding: 5rpx 10rpx;
							margin-right: 8rpx;
							font-size: 22rpx;
							text-align: center;
							font-family: PingFang SC;
							font-weight: 400;
							border-radius: 6rpx;
						}

						.good-name1 {
							border: 1rpx solid rgba(29, 197, 240, 1);
							color: #1DC5F0;
						}

						.good-name2 {
							border: 1rpx solid #FA7F05;
							color: #FA7F05;
						}

						.good-name3 {
							border: 1rpx solid #AA69EC;
							color: #AA69EC;
						}
					}

					.sold {
						font-size: 20rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #A3A3A3;
					}

				}

				.return {
					width: 100%;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
					background: rgba(252, 252, 252, 1);
				}


			}
		}

		.deliver {
			margin-top: 16rpx;
			padding: 35rpx 25rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: flex-end;

			text {
				font-size: 26rpx;
				color: #333333;
				font-family: PingFang;
				font-weight: 500;
			}

			.deliver-data {
				color: rgba(153, 153, 153, 1);
			}
		}

		.malldetail-free {
			background-color: #fff;
			width: 100%;
			margin: 20rpx 0;

			.free {
				padding: 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.frees {
					display: flex;

					.malldetail-free-title {
						margin-right: 20rpx;
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: 500;
						color: rgba(128, 128, 128, 1);
					}

					.malldetail-free-detail {
						margin-left: 10rpx;
						padding: 6rpx 11rpx;
						border: 1rpx solid #F27E84;
						border-radius: 8rpx;
						color: #F01D31;
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						text-align: center;

					}
				}

			}

			.malldetail-free-img {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>
